<!-- 我的订单 -->
<template>
    <view class="order">
        <view class="search">
            <u-search
                placeholder="搜索订单编号/商品名称"
                bgColor="#fff"
                v-model="keyword"
                :clearabled="true"
            ></u-search>
        </view>
        <view style="width: 100%">
            <u-tabs
                :list="list"
                lineColor="#DD4945"
                :itemStyle="{ padding: '16rpx 14px' }"
                :activeStyle="{ color: '#DD4945' }"
                :current="current"
                @click="click"
            ></u-tabs>
        </view>
        <view class="order-item">
            <view class="item" v-for="item in orderList" :key="item" @click="goOrderDetail(item)">
                <view class="item-top">
                    <text class="item-left-text">订单编号: 123456789</text>
                    <text class="item-right-text">{{
                        item.status == 1
                            ? "待发货"
                            : item.status == 2
                            ? "待收货"
                            : item.status == 3
                            ? "已完成"
                            : item.status == 4
                            ? "退款"
                            : "售后"
                    }}</text>
                </view>
                <view class="item-center">
                    <view class="center-left">
                        <image src="../../static/mine/关于.png" mode="widthFix"></image>
                    </view>
                    <view class="center-right">
                        <view class="right-top line-clamp-2">
                            环球德训鞋子女2024春季新款百搭休闲帆布鞋小众2023复古运动板鞋
                        </view>
                        <view class="right-center"> 规格：白色 升级款，35 </view>
                        <view class="right-bottom">
                            <text class="bot-min">￥</text>68
                            <text class="right-min">X1</text>
                        </view>
                    </view>
                </view>
                <view class="item-bottom">
                    <view class="bottom-text">共计：<text class="bottom-min">68</text></view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    name: "orderDetail",
    components: {},
    mixins: [],
    props: {},
    data() {
        return {
            keyword: "", //搜索词
            list: [
                { name: "全部" },
                { name: "待发货" },
                { name: "待收货" },
                { name: "已完成" },
                { name: "退款/售后" },
            ], //选项卡列表
            current: 0, //选项卡选中状态
            orderList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        };
    },
    computed: {},
    watch: {},
    mounted() {},
    //触底加载
    onReachBottom() {
        console.log("触底加载");
        this.getOrder(this.current + 1);
    },
    methods: {
        //切换选项卡
        click(item) {
            console.log("item", item);
            this.current = item.index;
            switch (item.index) {
                case 0:
            }
        },
        //获取订单列表
        getOrder(index) {
            console.log("index", index);
        },
        //点击跳转到详情
        goOrderDetail(item) {
            uni.navigateTo({ url: "/subpack/orderDetail/orderDetail" });
        },
    },
};
</script>
<style lang="scss" scoped>
.order {
    background-color: #f7f7f7;
    .search {
        padding: 10px 20px;
    }
    .order-item {
        margin: 20rpx 25rpx;
        .item {
            margin: 20rpx 0;
            padding: 20rpx;
            background-color: #fff;
            border-radius: 20rpx;
            .item-top {
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 28rpx;
                color: #999999;
                .item-left-text {
                }
                .item-right-text {
                    color: #d65051;
                }
            }
            .item-center {
                margin: 20rpx 0;
                display: flex;
                align-items: center;
                color: #333;
                image {
                    width: 120rpx;
                    height: 120rpx;
                }
                .center-right {
                    margin-left: 20rpx;
                    .right-top {
                        font-size: 28rpx;
                        line-height: 1.4;
                    }
                    .right-center {
                        font-size: 24rpx;
                        color: #999999;
                        margin: 10rpx 0;
                    }
                    .right-bottom {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        width: 100%;
                        color: #535353;
                        font-size: 40rpx;
                        text {
                            display: inline-block;
                        }
                        .bot-min {
                            font-size: 28rpx;
                        }
                        .right-min {
                            width: 100%;
                            color: #999999;
                            font-size: 28rpx;
                            text-align: right;
                            // position: relative;
                            // right: 20rpx;
                        }
                    }
                }
            }
            .item-bottom {
                text-align: right;
                .bottom-text {
                    color: #999999;
                    font-size: 28rpx;
                    .bottom-min {
                        font-size: 30rpx;
                        &::before {
                            content: "¥";
                            font-size: 30rpx;
                        }
                        color: #d65051;
                    }
                }
            }
        }
    }
}
.line-clamp-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
/deep/.u-search__action {
    position: relative;
    left: 10rpx;
}
</style>
